import UploadPreview from "@/components/UploadPreview";
import Https from "@/utils/Https";
import {
  DatePicker,
  Form,
  Input,
  Radio,
  message,
  Avatar,
  Button,
  Spin,
} from "antd";
import dayjs from "dayjs";
import { FC, useEffect, useState } from "react";
import styles from "../index.less";
import default_avater from "@/assets/imgs/default_avater.png";
import default_avater_female from "@/assets/imgs/default_avater_female.png";
import { connect } from "umi";

import {  Typography } from 'antd';
const { Text } = Typography;


const BaseInfo: FC<any> = (props) => {
  const { dispatch } = props;
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [headerImg, setHeaderImg] = useState("");
  const [sex, setSex] = useState("");
  const getDetails = async () => {
    setLoading(true);
    let res: any = await Https.get("/user/profile", {}, true);
    setLoading(false);
    if (res.code == 200) {
      form.setFieldsValue({
        ...res.data.user,
        birthDate: res.data.user.birthDate
          ? dayjs(res.data.user.birthDate)
          : "",
      });
      setHeaderImg(res.data.user.avatar);
      setSex(res.data.user.sex);
    } else {
      message.error(res.msg);
    }
  };
  const saveInfo = async () => {
    let result = await form.validateFields();
    let params = {
      ...result,
      birthDate: result.birthDate
        ? dayjs(result.birthDate).format("YYYY-MM-DD")
        : "",
    };
    setLoading(true);
    let res: any = await Https.put("/user/profile", params, true);
    setLoading(false);
    if (res.code == 200) {
      message.success("保存成功");
      setSex(params.sex);
      dispatch({
        type: "global/queryUserInfoObj",
      });
    } else {
      message.error(res.msg);
    }
  };
  useEffect(() => {
    getDetails();
  }, []);
  return (
    <Spin spinning={loading}>
      <div className={styles.baseInfo}>
        <div className={styles.title}>基本信息</div>
        <Form form={form} layout="vertical" colon={false}>
          <div className={styles.baseContent}>
            <div className={styles.left}>
            <Form.Item label="登录账号" name="userName" tooltip="登录时，输入此登录账号登录">
                <Input disabled style={{ width: "300px" }}/>
              </Form.Item>
              <Form.Item label="归属品牌ID" name="tenantId" tooltip="员工登录时，输入此品牌编码">
                <Input disabled style={{ width: "300px" }}/>
              </Form.Item>
              <Form.Item
                label="昵称"
                name="nickName"
                rules={[
                  { required: true, message: "昵称不能为空,长度不超过30个字" },
                ]}
              >
                <Input
                  placeholder="请输入"
                  style={{ width: "300px" }}
                  max={30}
                  showCount
                />
              </Form.Item>
              <Form.Item label="生日" name="birthDate">
                <DatePicker style={{ width: "300px" }} allowClear={false} />
              </Form.Item>
              <Form.Item label="性别" name="sex">
                <Radio.Group>
                  <Radio value={"0"}>男</Radio>
                  <Radio value={"1"}>女</Radio>
                  <Radio value={"2"}>保密</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label="个人简介" name="remark">
                <Input.TextArea
                  showCount
                  maxLength={100}
                  placeholder="请输入"
                  style={{ height: 120, resize: "none" }}
                />
              </Form.Item>
            </div>
            <div className={styles.right}>
              <Form.Item label="" name="avatar">
                {
                  <Avatar
                    size={128}
                    src={
                      headerImg
                        ? headerImg
                        : sex == "0"
                        ? default_avater
                        : default_avater_female
                    }
                  />
                }
              </Form.Item>
              <UploadPreview
                btnText="+  上传头像"
                onSuccess={(e) => {
                  form.setFieldsValue({ avatar: e });
                  setHeaderImg(e);
                }}
              />
            </div>
          </div>
        </Form>
        <div>
          <Button
            onClick={() => {
              saveInfo();
            }}
            type="primary"
          >
            更新信息
          </Button>
        </div>
      </div>
    </Spin>
  );
};
export default connect(({ global }) => ({
  ...global,
}))(BaseInfo);
